<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Lucky dog</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body id="body">
        <div align="center" class="titleName">Lucky dog</div>
        <div id="fa" align="center" class="student-container">    
        </div> 
        <div id="but" align="center">
            <button class="btn" id="startButton" onclick="start()">START</button>
            <button class="btn" id="stopButton" style="display: none;" onclick="end()">STOP</button>
        </div>
		<!-- 模态框 -->
		<div id="open-modal" class="modal-window">
		  <div>
		    <span onclick="closeModel()" title="Close" class="modal-close">Close</span>
		    <div class="model-title">Congratulations!</div>
		    <div>Lucky dog is <span style="background-color: rgb(231, 175, 12);font-size: 4vw;float: none;display: inline-block;width: 50%;height: 50%;" class="box" id = "studentSelected">王琦</span></div>
		    <div><small>Check out</small></div>
		   Don't be shy , just have a try
		  </div>
		</div>
	</body>
 <script src="live2d/autoload.js"></script>	
 <script type="text/javascript">
	 $(function(){
	 $('#body').height($(window).height());
	 $('#body').width($(window).width());
	 });
     //准备数据
     var arr = ["张静雯","张家豪","李姝娴","周纯纯","张柏源","张智博","杨润","于天昊","常欣","张梓渝","于淼淼","马腾腾","郭敬然","孔杨博","穆姿含","吴孟霖","崔雅琪","董瑞祥","宋易轩","汤智文","刘小新","张一凡","吴海龙","李梦圆","展佳倩","杨希","王子奇","宋宗泽","胡星宇","吴迪","祁建翔","王释苑","赵梓朝","沈子豪","李健博","李佳如","邹允润","伏蕊","李家辉","王梓","王嘉和","周洲","张杰","马国硕","吕柏霖","孟凡锦","杨舒涵","薛皓予","刘家成","黄美圆","曹展硕","汤宇轩"];
     var index = -1; 
     var time;
	 var startable = true;
     function nowfind() {	
         if(index != -1) {
             //将上一个选中的div的背景还原
             document.getElementById("id" + index).style.background="rgb(251, 234, 216)";
         }
         //随机数
         var num = Math.floor(Math.random() * arr.length);
         index = num; //记录被选中的div的id
         //获取对应的div
         var div = document.getElementById("id" + num);
         //设置背景颜色
         div.style.backgroundColor = "rgb(231, 175, 12)";
     }
  
     function start() {
         //调用计时器重复调用nowfind方法
		 //赋值给变量以便于关闭调用
         time = setInterval("nowfind()",100);
		 document.getElementById("stopButton").style.display = "block";
		 document.getElementById("startButton").style.display = "none";
		 document.getElementById("open-modal").style.display = "none";
     }
  
     function end() {
         //停止随机获取姓名
         clearInterval(time);
		 document.getElementById("startButton").style.display = "block";
		 document.getElementById("stopButton").style.display = "none";
		 document.getElementById("open-modal").style.display = "block";
		 document.getElementById("studentSelected").innerHTML = arr[index];
     }
  
     function init() {
         //将数组显示在页面上
         for(var i = 0; i < arr.length; i++) {
             //获取父容器
             var fa = document.getElementById("fa");
             //创建小div
             var div = document.createElement("div");
             //设置id属性,方便寻找
             div.id = "id" + i;
             div.className = "box"; //方便给小div设置样式
             //设置小div中显示的内容
             div.innerHTML = arr[i];
             //将小div放在父容器中
             fa.appendChild(div);
         }
     }
	 function closeModel() {
		 document.getElementById("open-modal").style.display = "none";
	 }
 $(function(){
     init();
	 ("body").height($("body").height());
 });
 </script>
 <style type="text/css">
	 @media (min-width:0px){
	     .box{font-size:12px;}
		 .titleName{font-size: 20px;}
	 }
	 @media (min-width: 320px){
	     .box{font-size:12px;}
		 .titleName{font-size:20px;}
	 }
	 @media (min-width: 340px){
	     .box{font-size:13px;}
		 .titleName{font-size: 20px;}
	 }
	 @media (min-width: 360px){
	     .box{font-size:14px;}
		 .titleName{font-size: 20px;}
	 }
	 @media (min-width: 380px){
	     .box{font-size:15px;}
		 .titleName{font-size: 20px;}
	 }
	 @media (min-width: 400px){
	     .box{font-size:15px;}
		 .titleName{font-size: 28px;}
	 }
	 @media (min-width: 1000px){
	     .box{font-size:30px;}
		 .modal-window{font-size:25px;}
		 .titleName{font-size: 50px;}
	 }
	 @media (min-width: 2000px){
	    .box{font-size:60px;}
		.modal-window{font-size:80px;}
		.titleName{font-size: 70px;}
	 }
	 @media (min-width: 3000px){
	    .box{font-size:120px;}
		.modal-window{font-size:120px;}
		.titleName{font-size: 240px;}
	 }
	 @media (min-width: 10000px){
	    .box{font-size:200px;}
	 }
	 @font-face {
	   font-family: 'MyNewFont';   /*字体名称*/
	   src:url(font/CabinSketch-Regular.ttf)       /*字体源文件*/
	 }
	 @font-face {
	   font-family: 'ChineseFont';   /*字体名称*/
	   src:url(font/htyxw.ttf)       /*字体源文件*/
	 }
	 *{
		 padding: 0;
		 margin: 0;
		 border: 0; 
	 }
     body{
		  background: url(img/background.jpg);		
		  /* background: url(img/tp1.jpg); */
		  /* 背景图垂直、水平均居中 */
		  background-position: center center;
		
		  /* 背景图不平铺 */
		  background-repeat: no-repeat;
		
		  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		  background-attachment: fixed;
		
		  /* 让背景图基于容器大小伸缩 */
		  background-size: cover;
		
		  /* 设置背景颜色，背景图加载过程中会显示背景色 */
		  background-color: #F5F5F5;
		  width: 100%;
		  height: 100%; 
     }
	 .student-container{
 		 width: 80%;
		 height: 70%;
		 position: absolute;
		 left: 50%;
		 top:15%;
		 margin-left: -40%;
	 }
	 .titleName{
		 color: whitesmoke;
		 font-family: 'MyNewFont';
		 width: 22%;
		 position: fixed;
		 left: 50%;
		 margin-left: -11%;
		 font-weight: bold;
		 padding: 2%;
	 }
	 
     .box {
		 font-family: 'ChineseFont';
         width: 10%;
         height: 10%;
         background-color: rgb(251, 234, 216);
         text-align: center;
         margin-left: 1%;
		 margin-top: 1%;
         float: left;
		 border-radius: 10%;
		 opacity: 80%;
		 vertical-align:middle;
		 padding-top: 1%;
		 font-size: bold;
     }
     #but{
         text-align: center; 
     }
     #fa{
         height: 60vh;
     }
     .btn{
         width: 16%;
         height: 10%;
		 border-radius: 50%;
		 font-size: 2vw;
		 font-weight: bold;
		 position: fixed;
		 left: 50%;
		 bottom: 14%;
		 margin-left: -8%;
		 z-index: 999;
		 position: fixed;
		 background-color: whitesmoke;
     }
	 /* 鼠标悬停特效 */
	.box:hover
	{
		box-shadow: 0px 0px 150px #000000;
		z-index: 2;
		-webkit-transition: all 200ms ease-in;
		-webkit-transform: scale(1.5);
		-ms-transition: all 200ms ease-in;
		-ms-transform: scale(1.5);   
		-moz-transition: all 200ms ease-in;
		-moz-transform: scale(1.5);
		transition: all 200ms ease-in;
		transform: scale(1.5);
	}
	/* 模态框 */
	.modal-window {
	  position: fixed;
	  background-color: rgba(255, 255, 255, 0.25);
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  z-index: 998;
	  display: none;
	  transition: all 0.3s;
	}
	.modal-window > div {
	  width: 40vw;
	  height: 28vh;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
	          transform: translate(-50%, -50%);
	  padding: 2em;
	  background: rgba(255, 255, 255,0.8);;
	  /* background-color: rgba(231, 175, 12,0.8); */
	}
	.modal-window header {
	  font-weight: bold;
	}
	.modal-window h1 {
	  font-size: 150%;
	  margin: 0 0 15px;
	}
	
	.modal-close {
	  color: #aaa;
	  line-height: 50px;
	  font-size: 80%;
	  position: absolute;
	  right: 8%;	
	  top:5%;
	  text-align: center;
	  width: 70px;
	  display: inline-block;
	  text-decoration: none;	  
	}
	.modal-close:hover {
	  color: black;
	}
	
	a {
	  color: inherit;
	}
	
	.modal-window div:not(:last-of-type) {
	  margin-bottom: 15px;
	}
	
	small {
	  color: #aaa;
	}
	#github svg {
		transition: all 1s;
		fill: #222;
		color: #fff;
		position: absolute;
		top: 0;
		right: 0;
		border: 0;
		width: 80px;
		height: 80px;
	}
	#github:hover svg {
		width: 160px;
		height: 160px;
	}
 </style>
</html>
